import { Portal, Toast } from '@ant-design/react-native'
import React, {useState} from 'react'
import { 
   View,
   Text, 
   StyleSheet,
   Image, 
   TextInput, 
   SafeAreaView, 
   Keyboard, 
   TouchableWithoutFeedback,
   KeyboardAvoidingView,
   ScrollView
  } from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler'
import { Header } from '../../components'
import { checkPassword, POST } from '../../utils'
import { pxToPt } from '../../utils/pxToPt'
import {useDispatch} from 'react-redux'
import {UserLogin} from '../../store/reducer/user'
import { useNavigation } from '@react-navigation/native'


export default function index() {
  const [account, setAccount] = useState('')
  const [password, setPassword] = useState('')
  const dispath = useDispatch()
  const navigation = useNavigation()
  
  const login = async () => {
    if(!account) {return}
    if(!checkPassword(password)){
      Toast.fail('密码只能输入6-20个字母、数字、下划线')
      return
    }

    const key = Toast.loading('正在加载');
    const res =  await dispath(UserLogin({account, password}))
    Portal.remove(key)
    
    if(res.success){
      Toast.success('登录成功')
      navigation.reset({
        index: 0,
        routes: [
          {
            name: 'TabBar'
          }
        ]
      })
    }else{
      Toast.fail("账户或密码错误")
    }
  }
  return (
    <SafeAreaView style={styles.wrapper}>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <View style={styles.container} >  
        <KeyboardAvoidingView behavior='position' >
          <ScrollView>
            <Image style={styles.logo} source={require('../../../assets/logo/logo.png')} />
            <Text style={styles.welCome}>Welcome back!</Text>
            <Text style={styles.tips}>Please login to your account.</Text>
            <View style={styles.form}>
              <View style={styles.formItem}>
              <Text style={styles.label}>账号</Text>
              <View style={styles.theHidden}></View>
                <TextInput
                keyboardType='number-pad'
                placeholder='用户名/邮箱/手机号码'
                style={styles.formItemInput}
                value={account}
                onChangeText={text=>setAccount(text)}
              />   
              </View>
              <View style={styles.formItem}>
                <Text style={styles.label}>密码</Text>
                <View style={styles.theHidden}></View>
                <TextInput
                  textContentType='password'
                  style={styles.formItemInput}
                  value={password}
                  onChangeText={text=>setPassword(text)}
                  secureTextEntry={true}
                  />
              </View>
              <TouchableOpacity onPress={login}>
                <View style={styles.btnStyle}>
                  <Text>Login</Text>
                </View>
              </TouchableOpacity>
            </View>
          </ScrollView>
        </KeyboardAvoidingView>
      </View>
      </TouchableWithoutFeedback>
      <View style={styles.footer}>
        <Text style={styles.link}>Don’t have an account? <Text onPress={ ()=>navigation.navigate('Register')} style={styles.jump}>SIGN UP</Text></Text>
      </View>
    </SafeAreaView>
  )
}
const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    backgroundColor: '#212529',
  },
  container: {
    flex: 1,
    paddingLeft: pxToPt(25),
    paddingRight: pxToPt(25),
  },
 
  logo: {
    alignSelf: 'center',
    marginTop: pxToPt(20),
    height: pxToPt(120),
    width: pxToPt(110)
  },
  welCome: {
    alignSelf: 'center',
    color: 'white',
    fontSize: pxToPt(26),
    fontWeight: 'bold',
    height: pxToPt(40),
    marginTop: pxToPt(30)
  },
  tips: {
    alignSelf: 'center',
    fontSize: pxToPt(16),
    color: '#45464E'
  },
  form: {
    marginTop: pxToPt(40),
  },
  
  formItem: {
    width: '100%',
    height: pxToPt(60),
    borderBottomWidth: pxToPt(0.5),
    borderColor: 'rgba(255, 255, 255, 0.1)',
    flexDirection: 'row',
    alignItems:'flex-end'
  },
  label:{
    lineHeight: pxToPt(30),
    fontSize: pxToPt(13),
    width: pxToPt(60),
    color: '#fff', 
  },
  theHidden: {
    width:pxToPt(20),
    height: pxToPt(20),
    backgroundColor: '#212529',
    position: 'relative',
    bottom: pxToPt(-1)
  },
  formItemInput: {
    flex: 1,
    // height:pxToPt(30),
    color: '#fff',
    fontSize: pxToPt(13),
    paddingLeft: pxToPt(10),
    paddingBottom: 0
  },
  btnStyle: {
    width: pxToPt(230),
    height: pxToPt(52),
    borderRadius: pxToPt(25),
    backgroundColor: '#6AC4AC',
    marginTop: pxToPt(30),
    alignSelf: 'center',
    alignItems: 'center',
    justifyContent: 'center'
  },
  footer: {
    height: pxToPt(50),
    width: '100%',
    borderTopWidth: pxToPt(0.2),
    justifyContent: 'center'
  },
  link: {
    textAlign: 'center',
    fontSize: pxToPt(13),
    color: '#8A9EAD'
  },
  jump: {
    color: '#45E9BD'
  }
})
